<template>
  <div class="live app-wrapper" :data-title="title" v-title>
    <div class="tab" @click="inputPanel = ''">
      <div class="tab-header clearfix" style="font-size: 12px;">
        <ul class="tab-header-list pull-left">
          <!-- <li class="tab-header-item active">互动</li>
          <li class="tab-header-item">介绍</li>
          <li class="tab-header-item">榜单</li> -->
          <li class="tab-header-item"
            v-for="(item, index) in channels.lists"
            :key="item.name"
            :class="{'active': channels.active == item.name}"
            @click.stop="switchChannel(item, index)"
          >
            {{item.text}}
          </li>
        </ul>
        <div class="follow-item pull-left">
          <span class="btn-follow" @click.stop="followAction">关注</span>
        </div>
      </div>

      <div class="tab-body">
        <div class="tab_track" ref="tabTrack" :style="{width: channels.lists.length * 100 + '%',transform: 'translate3d('+trackStyleLeft+'px,0,0)'}">
          <div class="tab-body-item picture-wrapper">
            <!-- <PicLive></PicLive> -->
            <Popular></Popular>
          </div>
        </div>
        <!-- /tab_track -->
      </div>

    </div>

  </div>
</template>

<script>
import {getUserinfo} from '@/api';

import Popular from './Channels/Popular';
import {getLiveDetail} from '@/api';




export default {
  components: {
    Popular
    // RedPacket
  },
  props: {},
  data() {
    return {
      channels: {
        active: 'piclive',
        lists: [
          {'name': 'piclive',  text: '图片直播', index: 4}
        ]
      }
    };
  },
  computed: {
    trackStyleLeft(){
      let width = window.innerWidth;
      let index = this.channels.lists.findIndex(item=>{
        return item.name == this.channels.active;
      });
      return -width * index;
    }
  },
  methods: {
    riseBubble(){
      let _this = this;
      function changeOffset(){
        _this.bubbleLists = _this.bubbleLists.filter((item)=>{
          return item.top > -300; // && item.opacity > 0;
          //return item.opacity > 0;
        });
        if(_this.bubbleLists.length){
          console.log(_this.bubbleLists)

          _this.riseBubbleTimer = setTimeout(()=>{
            _this.bubbleLists = _this.bubbleLists.map((item)=>{
              //item.opacity -= 0.1;
              item.top -= 5;
              item.left = Math.floor(Math.random() * (20 + 10)) - 10;
              return item;
            });
            changeOffset();
          }, 50);
        }else{
          // if(_this.riseBubbleTimer){
          //   clearTimeout(_this.riseBubbleTimer);
          //   _this.riseBubbleTimer = null;
          // }
        }


      }
      let colors = ['#cea835', '#ce8119', '#bf1d1a', '#c55784', '#ca378f', '#c02158', '#80ad4e', '#529154', '#32af98', '#1d4890', '#544098', '#3ba8f2'];
      // 往气泡数组里面添加内容
      let key = Math.floor(Math.random() * 12 + 1);
      let item = {
        color: colors[key],
        opacity: 1,
        left: Math.floor(Math.random() * (20 + 10)) - 10,
        top: Math.floor(Math.random() * (-10+40)) - 40,
      }

      this.bubbleLists.push(item);
      if(!this.riseBubbleTimer){
        changeOffset.call(this);
      }


      setTimeout(()=>{
        this.heartCounts++;
      }, 300)
    },
    giveGifts(params){
      console.log(params)
      this.isShowGiftPanel = false;
    },
    onLive(onM3u8,onCover){
        var that = this

        this. playerOptions =  {
            notSupportedMessage: "此视频暂无法播放，请稍后再试",
            autoplay: false, //如果true,浏览器准备好时开始回放。
            loop: false, // 导致视频一结束就重新开始。
            // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: 'zh-CN',
            aspectRatio:"16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: [{
              type: "application/x-mpegURL", //如果是直播的话  此处务必这样配置
              src: onM3u8,//视频url地址
            }],
            poster: onCover, //你的封面地址
            width: document.documentElement.clientWidth,
            control: { //此处的设置都未生效，不知道为啥，我用爆破的方式解决的
              timeDivider: false,
              durationDisplay: false,
              remainingTimeDisplay: false,
              fullscreenToggle: true //全屏按钮
            }
        };
    },
    followAction(){
      this.showCodeDialog = true;
      this.$store.dispatch('setMaskerDisplay', true);
    },
    close2VcodeDialog(){
      this.showCodeDialog = false;
      this.$store.dispatch('setMaskerDisplay', false);
    },
    showOtherMoneyDialog(){
      this.showOtherMoney = true;
    },
    hideOtherMoney(){
      this.showOtherMoney = false;
    },
    setOtherMoney(money){
      console.log('其他金额',money);
      this.showOtherMoney = false;
      this.closeGratuityDialog();
    },
    switchChannel(item, index){
      this.channels.active = item.name;
      // scrollTop 设置为0
      this.$refs.tabTrack.scrollTop = 0;
      //console.log(this.$refs.tabTrack.scrollTop)
    },
    closeGratuityDialog(){
      this.showGratuity = false;
      this.$store.dispatch('setMaskerDisplay', false);
    },
    awardAction(){
      //赏 打开红包弹窗
      this.showGratuity = true;
      this.$store.dispatch('setMaskerDisplay', true);
    },
    signAction(){
      this.$toast("您已签到！");
    },
    toggleFaceDisplay(){
      this.inputPanel = this.inputPanel == 'face' ? '' : 'face';
    },
    insertFace(faceInfo){
      let name = Object.values(faceMaps).find((item)=>{ return item.index == faceInfo.gifIndex})['text'];
      let girUrl = require(`@/assets/gif/${faceInfo.gifIndex}.gif`);
      let gifString = `<img src="${girUrl}" class="img-gif" />`;
      //this.inputContent = this.$refs.divInput.innerHTML + `${gifString}`;
      //this.inputContent = this.$refs.divInput.innerHTML + name; //`${faceInfo.htmlString}`(直接插入图片);
      this.inputContent += name;
      setTimeout(()=>{
          this.keepLastIndex(this.$refs.divInput);
          //改变scrollTop的位置
      },5);
    },
    sendContent(){
      this.submitContent();
    },
    submitContent(){

      let formatedStr = this.inputContent.replace(/<\/?.+?>/g, function(match, index, orginString){
        var indexStr = match.replace(/<i data-index=\"(.*?)\"([^\[]*)/gm,'[$1.gif]');
        return indexStr.replace('</i>', '');
      });
      //this.sqlContent = this.toHTML(this.inputContent)
      this.chatLists.push({content: formatedStr});
      this.inputContent = '';
      this.$refs.inputText.blur();
    },
    keepLastIndex(obj) {
        if (window.getSelection) { //ie11 10 9 ff safari
            obj.focus(); //解决ff不获取焦点无法定位问题
            var range = window.getSelection(); //创建range
            range.selectAllChildren(obj); //range 选择obj下所有子内容
            range.collapseToEnd(); //光标移至最后
        } else if (document.selection) { //ie10 9 8 7 6 5
            var range = document.selection.createRange(); //创建选择对象
            //var range = document.body.createTextRange();
            range.moveToElementText(obj); //range定位到obj
            range.collapse(false); //光标移至最后
            range.select();
        }
    },
    deleteContent(){
      this.inputContent = this.$refs.divInput.innerHTML.slice(0, -1);
      setTimeout(()=>{
          this.keepLastIndex(this.$refs.divInput);
          //改变scrollTop的位置
      },5);
    }
  },
  created() {
    getLiveDetail({id: this.$route.params.id}).then((response)=>{
      this.live = response.data.live;
      this.comments = response.data.comments;
      this.nav = response.data.nav;

      console.log(response.data.playerOptions)
      this.playerOptions = response.data.playerOptions;
    });
  },
  mounted() {
  },
  watch:{
    // 监控输入内容,如果长度>0则显示发送按钮
    inputContent(){
      this.showSendButton = this.inputContent.length > 0;
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';

.tab-header {
  height: 100px;
  font-size: 32px;
  line-height: 100px;
  background-color: #fff;
  .tab-header-list {
    width: 75%;
    display: flex;
  }

  .tab-header-item {
    color: #2a2a2a;
    position: relative;
    text-align: center;
    flex: 1;
    &.active{
      color: #1549eb;
      &:after {
        content: '';
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #1549eb;
      }
    }

  }

  .follow-item {
    width: 25%;
    text-align: center;
    > .btn-follow {
      display: inline-block;
      width: 130px;
      height: 56px;
      line-height: 56px;
      color: #fff;
      background: linear-gradient(#103ee7, #318bff);
      border-radius: 28px;
    }
  }
}

.tab {
  height: calc(100% - 350px);
  .tab-header-item, .van-tab {
    color: #2a2a2a;
    position: relative;
    text-align: center;
    flex: 1;
    &.active{
      color: #1549eb;
      &:after {
        content: '';
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #1549eb;
      }
    }

  }


  .tab-body {
    height: calc(100% - 100px);
    //height: 100%;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
  }

  .tab_track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: all ease .3s;
    .tab-body-item {
      flex: 1;
      height: 100%;
    }
  }

}



</style>
